<template>
  <div class="home fix_top">
    <el-container>
      <el-aside width="200px">
        <el-menu default-active="1" style="text-align:center;">
          <el-menu-item
            v-for="tItem in tags"
            :key="tItem.tId"
            :index="tItem.tId.toString()"
            @click="toClick(tItem.tId)"
          >
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title">{{ tItem.tName }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-carousel height="200px">
            <el-carousel-item v-for="pItem in newPosts" :key="pItem.pId">
              <div class="home_carousel becomeHand" @click="toDetails(pItem)">
                <!-- <img src="static/home/fengmian01.jpg" class="" alt="" /> -->
                <img :src="pItem.pImg" class="" alt="" />
                <h3>{{ pItem.titleName }}</h3>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-header>
        <el-main style="margin-top: 150px;overflow:visible;">
          <div v-for="cItem in cardMes" :key="cItem.pId">
            <subassembly :attrs='cItem'></subassembly>
          </div>
        </el-main>
      </el-container>
      <el-aside class="el_aside">
        <!-- 搜索框 -->
        <!-- <div>
          <el-input placeholder="请输入内容" v-model="searchValue">
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="toSearch(searchValue)"
            ></i>
          </el-input>
        </div> -->
        <!-- 排行榜-->
        <div class="aside_ranking">
          <h3>排行榜</h3>
          <div
            class="aside_ranking_mes becomeHand"
            v-for="(rItem, rIndex) in rankingList"
            :key="rItem.pId"
            @click="toDetails(rItem)"
          >
            <span :class="rIndex <= 2 ? 'topHotMes' : ''">{{
              rIndex + 1
            }}</span>
            <p>{{ rItem.titleName }}</p>
          </div>
          <div class="aside_ranking_toAll becomeHand" @click="toRankingList">
            查看完整榜单<i class="iconfont icon-jiantouyou"></i>
          </div>
        </div>
        <!-- 新投稿的博主 -->
        <div class="aside_blogger">
          <div class="aside_blogger_title">
            <h3>最新发帖人</h3>
            <div class="aside_blogger_title_update becomeHand" @click="newMesUser">
              <i class="iconfont icon-shuaxin1"></i> 更新
            </div>
          </div>
          <div
            class="aside_blogger_mes"
            v-for="bItem in newBloggerList"
            :key="bItem.pId"
            @click.stop="toMine(bItem)"
          >
            <postUp :newUp="bItem"></postUp>
            <!-- <img :src="bItem.uAvatar" alt="" class="becomeHand" />
            <div class="aside_blogger_mes_name">
              <div>
                <p class="becomeHand">{{ bItem.username }}</p>
                <el-button size="mini" @click="toFollow(bItem)">关注</el-button>
              </div>
              <p class="becomeHand" @click="toDetails(bItem)">
                <span style="color: rgb(105, 104, 104);">刚刚投稿了&nbsp;</span
                >{{ bItem.titleName }}
              </p>
            </div> -->
          </div>
        </div>
        <!-- 帮助 -->
        <div class="aside_more">
          <h3>更多</h3>
          <div class="becomeHand" @click="toSubmit">
            <img src="/static/home/publish02.png" alt="" />
            <div>
              <h3>投稿</h3>
              <span class="aside_more_des">快来发点什么吧！</span>
            </div>
          </div>
          <div class="becomeHand">
            <img src="/static/home/help02.png" alt="" />
            <div>
              <h3>帮助</h3>
              <span class="aside_more_des">查看使用说明</span>
            </div>
          </div>
        </div>
      </el-aside>
    </el-container>
    <el-backtop :visibility-height="100">UP</el-backtop>
  </div>
</template>

<script>
import subassembly from './HomeSubassembly.vue'
import postUp from './PostUp.vue'
export default {
  inject: ['reload'], //注入依赖
  name: 'Home',
  components: {
    subassembly,
    postUp
  },
  data () {
    return {
      searchValue: '', //输入内容
      newPosts: [], //最新文章2篇
      tags: [], //标签
      cardMes: [], //点击卡片获得信息
      rankingList: [], //排行榜信息
      newBloggerList: [] //博主列表
    }
  },
  created(){
    this.reload()
  },
  methods: {
    toSubmit(){
      // 判断是否登录
      console.log(this.cookies.getToken('X-Token'))
      if(this.cookies.getToken('X-Token')!=undefined&&this.cookies.getToken('X-Token')!=''){
        this.$router.push("/submit");
      }else{
        this.$message({
          message: '登录后才可以投稿哦',
          type: 'warning'
        });
      }
    },
    toRankingList(){
      this.$router.push('/rankingList')
    },
    toDetails (item) {
      console.log(item)
      let params = item
      console.log(params)
      this.$axios.updatePostView(params).then((res) => {
        console.log(res)
        let detail = JSON.stringify(res.data)
        this.$router.push({
          path: '/details',
          query: {
            detail
          } // 要传递的参数
        })
      })
    },
    toMine(item){
      console.log("个人中心："+item)
    },
    toClick (tId) {
      this.$axios.selectPostBytId(tId).then(res => {
        this.cardMes = res.data
        // console.log(res.data)
      })
    },
    getNewMes () {
      const params = {
        num: 4
      }
      this.$axios.selectNewPosts(params).then(res => {
        this.newPosts = res.data
      })
    },
    newMesUser () {
      const params = {
        num: 5
      }
      this.$axios.selectNewPosts(params).then(res => {
        this.newBloggerList = res.data
        // console.log(res.data)
      })
    },
    getHotMes () {
      const params = {
        num: 10
      }
      this.$axios.getHotPost(params).then(res => {
        this.rankingList = res.data
        // console.log(res.data)
      })
    },
    getTags () {
      this.$axios.getTagsList().then(res => {
        this.tags = res.data
      })
    }
  },
  created () {
    this.getNewMes()
    this.newMesUser()
    this.getHotMes()
    this.getTags()
    this.toClick(1)
  }
}
</script>
<style scoped>
.el-menu {
  border: 0;
}
.home_carousel {
  position: relative;
}
.home_carousel h3 {
  position: absolute;
  top: 170px;
  left: 10px;
  color: #000;
  font-size: 16px;
  opacity: 0.75;
  width: 300px;
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /*溢出用省略号显示*/
  white-space: nowrap; /*溢出不换行*/
}
.home_carousel img {
  width: 100%;
  height: 300px;

}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-main {
  /* box-sizing: border-box; */
}

.el_aside {
  box-sizing: border-box;
  margin-right: 50px;
}
.el_aside > div {
  margin-bottom: 40px;
}
/* 排行榜 */
.aside_ranking > h3 {
  padding: 10px 0;
  border-bottom: 1px solid rgb(241, 241, 241);
}

.aside_ranking_mes {
  display: flex;
  font-size: 14px;
  margin: 20px 0;
  box-sizing: border-box;
}
.aside_ranking_mes > span {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  background-color: rgb(212, 225, 233);
  margin-right: 5px;
}
.topHotMes {
  background-color: rgb(112 197 245) !important;
}
.aside_ranking_mes > p {
  width: 90%;
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /*溢出用省略号显示*/
  white-space: nowrap; /*溢出不换行*/
}
.aside_ranking_toAll {
  background-color: rgb(212, 225, 233);
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 14px;
  border-radius: 3px;
}
/* 最新发布信息的博主 */
.aside_blogger {
}
.aside_blogger_title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(241, 241, 241);
  padding-bottom: 10px;
}
.aside_blogger_title_update {
  border: 1px solid rgb(214, 214, 214);
  border-radius: 3px;
  font-size: 12px;
  color: rgb(105, 104, 104);
  width: 70px;
  height: 22px;
  line-height: 22px;
  text-align: center;
}
.aside_blogger_title_update > i {
  font-size: 12px;
  color: rgb(105, 104, 104);
}
.aside_blogger_mes {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.aside_blogger_mes > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 5px;
}
.aside_blogger_mes_name {
  width: 100%;
}
.aside_blogger_mes_name > div {
  margin: 10px 0;
}
.aside_blogger_mes_name > div:first-child {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.aside_blogger_mes_name > p {
  font-size: 12px;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /*作为弹性伸缩盒子模型显示。*/
  -webkit-box-orient: vertical; /*设置伸缩盒子的子元素排列方式--从上到下垂直排列*/
  -webkit-line-clamp: 2; /*显示的行*/
}

/* 更多 */
.aside_more > h3 {
  padding: 10px 0;
  border-bottom: 1px solid rgb(241, 241, 241);
}
.aside_more > div {
  display: flex;
  margin: 15px 0;
}
.aside_more > div > img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.aside_more_des {
  color: #a9acac;
  font-size: 12px;
}
</style>
